<script setup lang="ts">
import type {FormInstance} from 'element-plus'
import noFooterCard from '@/components/noFooter-card.vue'
import {ref} from 'vue'
import {Plus} from '@element-plus/icons-vue'

import type {UploadProps, UploadUserFile} from 'element-plus'

const fileList = ref<UploadUserFile[]>([
  {
    name: 'plant-1.png',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  },
  {
    name: 'plant-2.png',
    url: 'https://img2.baidu.com/it/u=2779055613,359308525&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  },
  {
    name: 'food.jpeg',
    url: 'https://img1.baidu.com/it/u=4113145103,1418725135&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
  },
  {
    name: 'figure-1.png',
    url: 'https://img2.baidu.com/it/u=3051277779,3211635819&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360',
  },
  {
    name: 'food.jpeg',
    url: 'https://img0.baidu.com/it/u=3975848570,2687380441&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}


const formRef = ref<FormInstance>()
const form = ref({
  uploader1: [],
  input1: '',
  input2: '',
  input3: '',
  input4: '',
  input5: '',
  checkbox1: [],
})

//表单验证规则
const rules = ref({})
//多选框选项
const checkbox1Options = ref([
  {
    label: '在线支付满减28减5',
    value: '1',
  },
  {
    label: 'VC无限橙果汁全场8折',
    value: '2',
  },
  {
    label: '单人精彩套餐',
    value: '3',
  },
  {
    label: '特价饮品8折抢购',
    value: '4',
  },
  {
    label: '双人精彩套餐',
    value: '5',
  },
])

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


//时间
const timer = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 23, 40),
])
</script>

<template>
  <div class="store">
    <noFooterCard>
      <template #title>
        <h2>店铺管理</h2>
      </template>
      <template #content>
        <div class="store-content">
          <el-form v-model="form" :rules="rules" ref="formRef" label-position="right" label-width="70px">
            <el-form-item prop="uploader1" label="店铺图片">
              <el-upload
                  v-model:file-list="fileList"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
              >
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img :src="dialogImageUrl"/>
              </el-dialog>
            </el-form-item>
            <el-form-item prop="input1" label="配送费">
              <el-input v-model="form.input1" placeholder="请输入配送费" size="large">
              </el-input>
            </el-form-item>
            <el-form-item prop="input2" label="配送时间">
              <el-input v-model="form.input2" placeholder="请输入配送时间" size="large">
              </el-input>
            </el-form-item>
            <el-form-item prop="input3" label="配送描述">
              <el-input v-model="form.input3" placeholder="请输入配送描述" size="large">
              </el-input>
            </el-form-item>
            <el-form-item prop="input4" label="店铺评分">
              <el-input v-model="form.input4" placeholder="请输入店铺评分" size="large">
              </el-input>
            </el-form-item>
            <el-form-item prop="input5" label="销量">
              <el-input v-model="form.input5" placeholder="请输入销量" size="large">
              </el-input>
            </el-form-item>
            <el-form-item prop="checkbox1" label="活动" size="large">
              <el-checkbox-group v-model="form.checkbox1" size="large">
                <el-checkbox :label="option.label" :value="option.value"
                             v-for="option in checkbox1Options"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item prop="input5" label="营业时间">
              <el-time-picker
                  v-model="timer"
                  is-range
                  arrow-control
                  range-separator="至"
                  start-placeholder="起始时间"
                  end-placeholder="结束时间"
                  size="large"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
    </noFooterCard>
  </div>
</template>

<style scoped>
.store-content {
  width: 600px;
}
</style>